<template>
    <div>
        <h1>注册</h1>
        <InputElement
            id="username"
            type="text"
            :info="username.info"
            v-model="username.value"
            @validate="validateUsername"
            >用户名：</InputElement
        >
        <InputElement
            id="pwd"
            type="password"
            :info="pwd.info"
            v-model="pwd.value"
            @validate="validatePwd"
            >密码：</InputElement
        >
        <InputElement
            id="confirm"
            type="password"
            :info="confirm.info"
            v-model="confirm.value"
            @validate="validateConfirm"
            >确认密码：</InputElement
        >

        <div>
            <input type="button" value="注册" @click="submit" />
        </div>
    </div>
</template>
<script setup>
import { ref, computed } from "vue";
import InputElement from "../../components/compose/InputElement.vue";

const username = ref({
    value: "",
    info: "",
});
const pwd = ref({
    value: "",
    info: "",
});
const confirm = ref({
    value: "",
    info: "",
});
const money = ref(1000);

const computeMoney = computed(() => {
    return "$" + money.value;
});

function validateUsername() {
    if (/^\w{6,20}$/.test(username.value.value)) {
        username.value.info = "√";
    } else {
        username.value.info = "用户名格式不正确";
    }
}
function validatePwd() {
    if (/^.{6,}$/.test(pwd.value.value)) {
        pwd.value.info = "√";
    } else {
        pwd.value.info = "密码格式不正确";
    }
}
function validateConfirm() {
    if (pwd.value.value == confirm.value.value) {
        confirm.value.info = "√";
    } else {
        confirm.value.info = "两次密码不一致";
    }
}
function submit() {
    if (
        username.value.info == "√" &&
        pwd.value.info == "√" &&
        confirm.value.info == "√"
    ) {
        alert("注册成功");
    } else {
        alert("验证失败");
    }
}
function handleInput(value) {
    console.log("value:", value);
}
</script>
<style></style>
